<template>

  <div class="box">
    <!-- 页头 -->
    <el-page-header style="padding: 20px;" content="详情页面" @back="goBack" />
    <div class="divTabs">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="基本信息" name="first">
          <el-form ref="form" style="padding-top: 30px;" label-position="left">
            <el-row>
              <el-col :span="8">
                <el-form-item v-if="isShowForm" label="员工编号:">
                  <el-input v-model="form.userId" disabled class="inputW" />
                </el-form-item>
                <div v-else class="else"><i>员工编号:</i> {{ form.userId }}</div>
              </el-col>

              <el-col :span="8">
                <el-form-item v-if="isShowForm" label="司机名称:">
                  <el-input v-model="form.name" disabled class="inputW" />
                </el-form-item>
                <div v-else class="else"><i>司机名称:</i> {{ form.name }}</div>
              </el-col>

              <el-col :span="8">
                <el-form-item v-if="isShowForm" label="所属机构:">
                  <el-input v-model="form.agencyName" disabled class="inputW" />
                </el-form-item>
                <div v-else class="else"><i>所属机构:</i> {{ form.agencyName }}</div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item v-if="isShowForm" label="电话:">
                  <el-input v-model.number="form.mobile" disabled class="inputW" />
                </el-form-item>
                <div v-else class="else"><i>电话:</i> {{ form.mobile }}</div>
              </el-col>

              <el-col :span="8">
                <el-form-item v-if="isShowForm" label="年龄:">
                  <el-input v-model.number="form.age" class="inputW" />
                </el-form-item>
                <div v-else class="else"><i>年龄:</i> {{ form.age }}</div>
              </el-col>
            </el-row>

            <el-form-item v-if="isShowForm" :span="8">
              <el-button type="primary" @click="submitForm">保存</el-button>
              <el-button @click="close">取消</el-button>
            </el-form-item>
            <el-button v-else type="primary" @click="isShowForm = true">编辑</el-button>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="驾驶证信息" name="second">配置管理</el-tab-pane>
      </el-tabs>
    </div>

  </div>

</template>

<script>
import { getDriversDetails, updateDetails } from '../api/carList'
export default {
  data() {
    return {
      dialogVisible: false,
      activeName: 'first',
      isShowForm: false,
      form: {
        userId: null, // 编号
        name: '', // 名字
        agencyName: '', // 所属机构
        mobile: '', // 手机号
        age: null // 年龄

      }

    }
  },
  created() {
    this.getDriversDetails()
  },
  methods: {
    // 获取详情
    async getDriversDetails() {
      console.log(1)
      //   console.log(this.$route.params.id)
      const res = await getDriversDetails(Number(this.$route.params.id))
      console.log(res)
      this.form = res.data
    },
    goBack() {
      this.$router.push('/car/carList')
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    // 关闭编辑状态
    close() {
      this.isShowForm = false
      this.$refs.form.resetFields()
    },
    // 点击保存
    async submitForm() {
      await updateDetails(this.$route.params.id, this.form)
      this.$message.success('更新成功')
      this.getDriversDetails()
      this.close()
    }
  }
}
</script>

<style lang="scss" scoped>
.box{
    background-color: #f3f5f9;
    .divTabs{
        margin:0 20px;
        background-color: #fff;
        padding: 30px;
        .else{
            padding: 20px;
        }
    }
}
.inputW{
  width: 260px;
}
i{
  margin-right: 20px;

}
img{
  width: 150px;
  height: 150px;
}
.upbox{
  width: 300px;
  height: 200px;
}
</style>
